<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-nav"
    @open="handleOpen"
    @close="handleClose"
    :default-openeds="['1', '2']"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1"
          ><router-link to="/home">Go to login</router-link></el-menu-item
        >
        <el-menu-item index="1-2"
          ><router-link to="/login">Go to login</router-link></el-menu-item
        >
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>

      <el-menu-item index="1-1"
        ><router-link to="/login">Go to login</router-link></el-menu-item
      >
      <el-menu-item index="1-2"
        ><router-link to="/login">Go to login</router-link></el-menu-item
      >

      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { Location, Document, Menu as IconMenu, Setting } from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "AsideNav",
  components: {},
});
</script>

<style>
ul.el-menu.el-menu-vertical-nav {
  height: 100vh;
}
</style>
